<template>
	<view>
		<view class="shop_index_bj  " :style="{backgroundImage: 'url('+home_img+')'}">
			<view class="p3  flex j-s a-c" style="padding-top: 30rpx;">
				<view class="">
					<text style="color: #fff;font-size: 35rpx;">{{shop_name}}</text>
				</view>
				<view class="flex a-c j-b pl3 pr3 ml2"
					style="background-color:#F5F5F5;height: 80rpx;border-radius: 36rpx;flex: 1;">
					<input style="flex:1" v-model="search_key" type="text" class="f26"
						:placeholder="shop_search_placeholder">
					<text @click="on_search" class="w800 f30 ml1" style="color: #0071FE;">搜索</text>
				</view>
			</view>
		</view>
		<view class="p2" style="margin-top: -60rpx;">
			<view class="flex a-c j-c" style="background-color: #fff;height: 80rpx;border-radius: 15rpx;">
				<text>曝光量:</text>
				<text style="color: #0071FE;">{{shop_read}}</text>
				<text style="margin-left: 100rpx;">已入驻:</text>
				<text style="color: #0071FE;">{{shop_num}}</text>
			</view>
		</view>

		<view class=" p20" style="margin-top: -20rpx;">
			<view class="row-wrap b_y pb2" style="background-color: #fff;">
				<view style="width: 140rpx;" v-for="(vo, index) in NavList" :key="index">
					<view style="padding-top:20rpx;text-align: center;" @click="on_index(vo.id,index)">
						<image class="q_y" :src="vo.img|getImg" style="width:80rpx;height:80rpx;border-radius: 96rpx;">
						</image>
						<view class="pt1">
							<text style="font-size: 26rpx;">{{vo.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pl2 pr2" style="position: -webkit-sticky; position: sticky;top: 0px;z-index: 10;">
			<view class="flex j-b a-c p20 bb" style="background-color: #fff;">
				<text @click="on_tab(0)" :class="tabindex==0 ? 'tab_list' : 'tab_list_w'">推荐商家</text>
				<text @click="on_tab(1)" :class="tabindex==1 ? 'tab_list' : 'tab_list_w'">离我最近</text>
				<text @click="on_tab(2)" :class="tabindex==2 ? 'tab_list' : 'tab_list_w'">最新入驻</text>
			</view>
		</view>

		<shopList :list="shop_list" :islog="islog" :log="log" :tabindex="tabindex"> </shopList>

		<tabbar></tabbar>
	</view>
</template>

<script>
	import shopList from "@/zu/banmitongcheng/shop_list.vue";


	export default {
		components: {
			shopList
		},
		data() {
			return {
				title: 'Hello',
				set: {},
				NavList: [],
				statistics: {},
				shop_list: [],
				tabindex: 0,
				islog: true,
				log: '加载中',
				url: '',
				search_key: '',
				home_img: '',
				shop_read: 0,
				shop_num: 0,
				shop_name:'',
				shop_search_placeholder:''

			}
		},
		watch: {
			get_plugin_set: {
				handler: function(newVal, oldVal) {
					if (newVal != 0) {
		
					 
						let set_find = newVal;
						this.home_img = this.Http.getImg(set_find.home_img);
							 
						 
						this.shop_search_placeholder= set_find.search_placeholder
						this.shop_name= set_find.website_name
						 
					}
		
		
		
				},
				immediate: true
			}
		
		
		},

		onLoad() {
			this.page = 1;
			var that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					uni.setStorage({
						key: 'lat',
						data: res.latitude
					});
					uni.setStorage({
						key: 'lng',
						data: res.longitude
					});
					that.shop_init(that.tabindex);
				}
			});
			 
			this.init();
		},
		onShareAppMessage(res) {
			return {
				title: this.get_plugin_set.shop_name,
				path: '/pages/index/index',
				imageUrl: '',
			}
		},

		onShareTimeline(res) {
			return {
				title: this.get_plugin_set.shop_name,
				path: '/pages/index/index',
				imageUrl: '',
			}
		},
		methods: {
			tao(appId, path) {

				uni.navigateToMiniProgram({
					appId: appId,
					path: path,
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			on_index(id, index) {
				var type = this.NavList[index]['type'];

				if (type == 1) {
					this.tao(this.NavList[index]['appId'], this.NavList[index]['path']);
					return
				}

				uni.navigateTo({
					url: '/pages/banmitongcheng/nav_list?id=' + id
				})
			},
			on_search() {
				uni.navigateTo({
					url: '/pages/banmitongcheng/shop_search?search_key=' + this.search_key
				})
			},
			on_index(id) {
				uni.navigateTo({
					url: '/pages/banmitongcheng/nav_list?id=' + id
				})
			},
			on_tab(index) {
				this.shop_list = [];
				this.islog = true;
				this.page = 1;
				this.log = '加载中';
				this.tabindex = index;

				this.shop_init(this.tabindex);
			},
			init() {
				let requestParams = {};
				this.Http.post('/plugin.php/banmitongcheng/api/index/index', requestParams).then(ret => {

					if (ret.status == 200) {
					 
						
						this.shop_read= ret.data.statistics?ret.data.statistics.shop_read:0
						this.shop_num =   ret.data.shop_num
						
						this.NavList = ret.data.NavList;
						this.shop_init();
					}
				})
			},
			shop_init() {
				var that = this;
				let requestParams = {
					page: this.page,
					tabindex: this.tabindex
				};
				this.Http.post('/plugin.php/banmitongcheng/api/index/shop_list', requestParams).then(ret => {

					if (ret.status == 200) {
						if (that.page == 1) {
							this.shop_list = ret.data.shop_list;
						} else {
							if (ret.data.shop_list.length > 0) {
								for (var i = 0; i < ret.data.shop_list.length; i++) {
									that.shop_list.push(ret.data.shop_list[i]);
								}
							}
							if (ret.data.shop_list < 10) {
								this.log = "没有数据了"
							}
						}
						setTimeout(() => {
							that.isinit = false;
							that.islog = false;
						}, 100)


					}



				})
			},

		},
		onReachBottom() {
			this.jiazai = "加载中...";
			this.page = this.page += 1;
			this.shop_init();
		},
	}
</script>

<style>
	.tab_list {
		font-weight: 800;
		border-bottom: solid 5rpx #0071FE;
		padding-bottom: 10rpx;
		color: #0071FE;
	}

	.tab_list_w {
		border-bottom: solid 5rpx #fff;
		padding-bottom: 10rpx;
		color: #7B7B7B;
	}

	.yuanzi {
		background-color: #F6F7FB;
		margin: 2px;
		padding-right: 5px;
		padding-left: 5px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 10px;
		color: #707072;
		border-radius: 12px;
	}

	.shop_index_bj {
		height: 350rpx;
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
</style>